<template>
  <div class="app-box">
    <card class="detail-card">
      <div slot="header" class="detail-head">
        <div class="detail-head-title">订单详情</div>
        <div class="detail-head-link">查看合同</div>
      </div>
      <div slot="content" class="detail-box vux-1px-b">
        <div class="detail-item">
          <span class="detail-label">订单号</span>
          <span class="detail-text">{{orderDetail.order_id}}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">订单状态</span>
          <span class="detail-text">{{orderDetail.order_state|changeOrderState}}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">消费日期</span>
          <span class="detail-text">{{orderDetail.serial_no_time|changeTimeFormat}}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">商品金额</span>
          <span class="detail-text">{{orderDetail.goods_amount|moneyFormatter}}元</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">分期手续费</span>
          <span class="detail-text">{{orderDetail.stagingFee}}元</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">分期卡号</span>
          <span class="detail-text">{{orderDetail.credit_card_no}}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">消费商户</span>
          <span class="detail-text">{{orderDetail.realMerName}}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">分期期数</span>
          <span class="detail-text">{{orderDetail.total_stage_count}}期</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">已出账期数</span>
          <span class="detail-text">{{orderDetail.out_stage_count}}期</span>
        </div>
      </div>
    </card>
    <card class="detail-card">
      <div slot="header" class="detail-head">
        <div class="detail-head-title">分期出账记录</div>
        <div class="detail-head-tip">扣款方：</div>
      </div>
      <div slot="content" class="detail-box vux-1px-b">
        <div class="instalment-record-title" v-if="nextAcctDate">预计下期出账日为 {{nextAcctDate|changeTimeFormat2}}</div>
        <timeline>
          <timeline-item v-for="(item, index) in instalmentRecord" :key="index">
            <div class="text-top">第{{item.stageCount}}期 {{item.transAmt|moneyFormatter}}元</div>
            <div class="text-bottom">状态：{{item.respmsg}}<span class="text-time">{{item.instalmentTime|changeTimeFormat2}}</span></div>
          </timeline-item>
        </timeline>
      </div>
    </card>
    <div class="tips-area">
      <p>提示</p>
      <p>1.账单分期详情，以发卡行实际分期账单为准；</p>
      <p>2.针对部分银行：</p>
      <p>订单分期金额=发卡行实际扣款金额+发卡行分期服务费</p>
    </div>
  </div>
</template>
<script>
import { Group, Alert, Cell, Card, Flexbox, FlexboxItem, Timeline, TimelineItem } from 'vux'
import { getMerInfo, getOrderDetail } from '@/api/apply'
export default {
  components: {
    Group,
    Alert,
    Cell,
    Card,
    Flexbox,
    FlexboxItem,
    Timeline,
    TimelineItem
  },
  data() {
    return {
      orderDetail: {
        order_id: '', // 订单号
        order_state: '', // 订单状态
        serial_no_time: '00000000000000', // 消费日期
        goods_amount: 0, // 商品金额
        stagingFee: '', // 分期手续费
        credit_card_no: '', // 分期卡号
        realMerName: '', // 消费商户
        total_stage_count: '', // 分期期数
        out_stage_count: '' // 已出账期数
      },
      instalmentRecord: [],
      nextAcctDate: ''
    }
  },
  filters: {
    changeOrderState(orderState) {
      //订单状态，01待消费,02分期待确认收货,03分期成功,04已退货，99被拒绝状态
      const statusList = {
        '01': '待消费',
        '02': '待确认收货',
        '03': '分期成功',
        '04': '已退货',
        '05': '已撤销',
        '99': '分期失败'
      }
      return statusList[orderState]
    },
    changeTimeFormat(timeText) {
      let trans_time = String(timeText)
      let trans_time_year = trans_time.substr(0, 4)
      let trans_time_month = trans_time.substr(4, 2)
      let trans_time_date = trans_time.substr(6, 2)
      let trans_time_hour = trans_time.substr(8, 2)
      let trans_time_minutes = trans_time.substr(10, 2)
      let trans_time_seconds = trans_time.substr(12, 2)
      trans_time = trans_time_year + "-" + trans_time_month + "-" + trans_time_date + " " + trans_time_hour + ":" + trans_time_minutes + ":" + trans_time_seconds;
      return trans_time;
    },
    changeTimeFormat2(timeText) {
      let trans_time = String(timeText)
      let trans_time_year = trans_time.substr(0, 4)
      let trans_time_month = trans_time.substr(4, 2)
      let trans_time_date = trans_time.substr(6, 2)
      trans_time = trans_time_year + "-" + trans_time_month + "-" + trans_time_date
      return trans_time;
    },
    moneyFormatter(money) {
      return parseFloat(money).toFixed(2)
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    // this.fetchData()
  },
  methods: {
    fetchData() {
      // const uploadData = {
      //   'open_id': '71GHtaHWUxsZnnq5DggPoIgxyOQCcdkxQQsSemJQIGs=',
      //   'serial_no': '011523583738287393',
      //   'servlet_type': 'query_orderByOrderId'
      // }
      const uploadData = {
        'open_id': this.$route.query.open_id,
        'serial_no': this.$route.query.serial_no,
        'servlet_type': 'query_orderByOrderId'
      }
      getOrderDetail(uploadData, {}).then(res => {
        console.log('list', res.data.lft_orderinfo_response)
        const returnData = res.data.lft_orderinfo_response
        this.orderDetail = returnData.lfqorderInfo_arrays.lfqorderInfo[0]
        if (returnData.lfqRepayNotices_arrays) {
          this.instalmentRecord = returnData.lfqRepayNotices_arrays.lfqRepayNotices.reverse()
          this.nextAcctDate = this.instalmentRecord[0].nextAcctDate
        }
        this.handleData(this.orderDetail)
      }).catch(error => {
        console.log(error)
      })
    },
    handleData(data) {
      const contentMonet = data.stage_amt
      const applyNum = data.goods_amount
      const stageNumber = data.total_stage_count
      const eachMoney = (parseFloat(contentMonet) / parseInt(stageNumber)).toFixed(2)
      const eachPrincipal = (parseFloat(applyNum) / parseInt(stageNumber)).toFixed(2)
      const eachFeeNum = (parseFloat(eachMoney) - parseFloat(eachPrincipal)).toFixed(2)
      this.orderDetail.stagingFee = eachFeeNum
      if (data.t_mer_name) {
        this.orderDetail.realMerName = data.t_mer_name
      } else {
        this.orderDetail.realMerName = data.tl_mer_name
      }
    }
  }
}

</script>
<style lang="less">
.detail-card {
  padding: 0 15px;
  margin-bottom: 15px;
  .detail-head {
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    .detail-head-title {
      float: left;
      font-size: 16px;
      line-height: 20px;
      color: #333;
    }
    .detail-head-link {
      float: right;
      font-size: 14px;
      line-height: 20px;
      color: #007ee9;
    }
    .detail-head-tip {
      float: right;
      font-size: 14px;
      line-height: 20px;
      color: #999;
    }
  }
  .detail-box {
    padding: 10px 0;
    .detail-item {
      span {
        display: inline-block;
        padding: 6px 0px 3px 0px;
        font-size: 14px;
        color: #999;
        max-width: 240px;
        &.detail-label {
          width: 90px
        }
      }
    }
  }
  .instalment-record-title {
    font-size: 14px;
    line-height: 20px;
    color: #007ee9;
    padding: 5px 0 5px 1.4rem;
    margin-left: 4px;
  }
  .vux-timeline {
    padding: 0;
    padding-left: 4px;
    .text-top {
      padding-top: 10px;
      .vux-timeline-item-color {
        width: 20px;
        height: 20px;
        left: -4px;
        top: 0;
        background-color: #ccc;
        .weui-icon-success-no-circle {
          display: block !important;
        }
        &.vux-timeline-item-head-first {
          background-color: #007ee9;
        }
      }
      .vux-timeline-item-content {
        padding: 0 0 1.5rem 1.4rem;
      }
      .vux-timeline-item-tail {
        background-color: #ccc;
      }
      .text-top {
        font-size: 14px;
        line-height: 20px;
        color: #666;
      }
      .text-bottom {
        font-size: 14px;
        line-height: 20px;
        color: #999;
        .text-time {
          float: right;
          display: block;
        }
      }
      .vux-timeline-item {
        &:first-child {
          .text-top {
            color: #007ee9;
          }
          .text-bottom {
            color: #007ee9;
          }
        }
      }
    }
  }
}  
.tips-area {
  padding: 15px;
  padding-top: 0;
  p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
  }
}
</style>
